import React, { Component, Fragment } from 'react';
import styles from '../style.less';

interface InstructionsProps {
  dataInfo: any;
}

class Instructions extends Component<InstructionsProps> {
  renderOne = () => (
    <Fragment>
      <p>
        <span className={styles.label}>
          借款本金：
        </span>
        依据合同的借款总额与借款时间计算出每月应还的本金
      </p>
      <p>
        <span className={styles.label}>
          投递扣费：
        </span>
        根据本月的总快件量（投递量），按件收取费用
      </p>
      <p>
        <span className={styles.label}>
          柜体现金：
        </span>
        当月用户柜体投入硬币的金额，系统在结算时会扣除柜体现金部分
      </p>
      <p>
        <span className={styles.label}>
          平台服务费：
        </span>
        依据合同签署时规定的平台收取总收入金额的百分之XX作为服务费
      </p>
      <p>
        <span className={styles.label}>
          当月利息：
        </span>
        依据期末余额计算出当月的应还利息，计算公式：期末余额10%除以12（月）
      </p>
      <p>
        <span className={styles.label}>
          柜体寄存：
        </span>
        当月产生的柜体寄存收入
      </p>
    </Fragment>
  )

  renderTwo = () => (
    <Fragment>
      <p>
        <span className={styles.label}>
          借款本金：
        </span>
        依据合同的借款总额与借款时间计算出每月应还的本金
      </p>
      <p>
        <span className={styles.label}>
          当月利息：
        </span>
        依据期末余额计算出当月的应还利息，计算公式：期末余额10%除以12（月）
      </p>
    </Fragment>
  )

  render() {
    const { dataInfo: { service_fee_type, garden_type } } = this.props;

    return (
      <div className={styles.instructions}>
        {service_fee_type === 1 ? (
          <Fragment>
            <p>
              <span className={styles.label}>{garden_type === 1 ? '当月柜体收入：' : '当月收入：'}</span>
              {garden_type === 1
                ? '投递主账户收入+取件主账户收入+柜体寄存+柜体现金+柜体寄件'
                : '投递主账户收入+取件主账户收入+柜体寄存+柜体现金+寄件'
              }
            </p>
            <p>
              <span className={styles.label}>当月总收入：</span>
              {garden_type === 1 ? '所有地区的【当月柜体收入】总和' : '所有地区的【当月收入】总和'}
            </p>
            {this.renderOne()}
          </Fragment>
        ) : (
          <Fragment>
            <p>
              <span className={styles.label}>{garden_type === 1 ? '当月柜体收入：' : '当月收入：'}</span>
              {garden_type === 1
                ? '投递主账户收入+取件主账户收入+柜体寄存+柜体寄件'
                : '投递主账户收入+取件主账户收入+柜体寄存+寄件'
              }
            </p>
            <p>
              <span className={styles.label}>当月总收入：</span>
              {garden_type === 1 ? '所有地区的【当月柜体收入】总和' : '所有地区的【当月收入】总和'}
            </p>
            {this.renderTwo()}
            <p>
              <span className={styles.label}>柜体寄存：</span>
              {garden_type === 1 ? '当月产生的柜体寄存入账收入' : '当月产生的柜体寄存收入'}
            </p>
          </Fragment>
        )}
      </div>
    );
  }
}

export default Instructions;
